/**
 * DressItem.js
 * 
 * 服装项目组件，用于显示单个服装项目的详细信息
 * 包含图片、名称、价格和添加到购物车的功能
 */

import { StyleSheet, Text, View, Pressable, Image } from 'react-native'
import React from 'react'

/**
 * DressItem 组件
 * 显示单个服装项目的详细信息
 * @param {Object} props - 组件属性
 * @param {Object} props.item - 服装项目数据对象
 * @param {string} props.item.image - 服装图片URL
 * @param {string} props.item.name - 服装名称
 * @param {number} props.item.price - 服装价格
 * @returns {JSX.Element} 服装项目组件
 */
const DressItem = ({ item }) => {
    return (
        <View>
            {/* 服装项目容器 */}
            <Pressable
                style={{
                    backgroundColor: "#F8F8F8",     // 背景颜色
                    borderRadius: 8,                // 圆角
                    padding: 10,                    // 内边距
                    flexDirection: "row",           // 水平布局
                    alignItems: "center",           // 垂直居中对齐
                    justifyContent: "space-between", // 两端对齐
                    margin: 5,                      // 外边距
                }}
            >

                {/* 服装图片容器 */}
                <View>
                    <Image
                        style={{ width: 70, height: 70 }}  // 图片尺寸
                        source={{ uri: item.image }}       // 图片源
                    />
                </View>
                
                {/* 服装信息容器 */}
                <View>
                    {/* 服装名称 */}
                    <Text style={{
                        width: 83,                      // 宽度
                        fontSize: 17,                   // 字体大小
                        fontWeight: "500",              // 字体粗细
                        marginBottom: 7                 // 下边距
                    }}>
                        {item.name}
                    </Text>

                    {/* 服装价格 */}
                    <Text style={{
                        width: 60,                      // 宽度
                        color: "gray",                  // 颜色
                        fontSize: 15                    // 字体大小
                    }}>
                        ${item.price}
                    </Text>
                </View>

                {/* 添加按钮 */}
                <Pressable>
                    <Text
                        style={{
                            borderColor: "gray",        // 边框颜色
                            borderRadius: 4,            // 边框圆角
                            borderWidth: 0.8,           // 边框宽度
                            marginVertical: 10,         // 垂直外边距
                            color: "#088F8F",           // 文字颜色
                            textAlign: "center",        // 文字居中
                            padding: 6,                 // 内边距
                            fontSize: 14,               // 字体大小
                            // fontWeight: 'bold'
                        }}
                    >
                        添加
                    </Text>
                </Pressable>

            </Pressable>
        </View>
    )
}

export default DressItem

/**
 * 样式定义
 * 使用StyleSheet.create创建组件样式
 */
const styles = StyleSheet.create({})